<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="896" @ok="handleSubmit"  >

    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <a-form ref="formEl" :model="planModel" >
    </a-form>

    <template #appendFooter>
      <a-button :type="okType"  :loading="confirmLoading" @click="allCopy">
        全部复制
      </a-button>
    </template>
  </BasicModal>
  <CopyDbGlfscModal @register="registerModal1" @setRecord="setRecord" @success="handleSuccess" ref="CopyDbGlfscModalRef"></CopyDbGlfscModal>

</template>

<script lang="ts" setup>
  import {ref, computed, unref, reactive} from 'vue';
  import {BasicModal, useModal, useModalInner} from '/@/components/Modal';
  import {BasicForm, FormSchema, useForm} from '/@/components/Form/index';
  import {formSchema} from '../DbGlfsc.data';
  import {saveOrUpdate} from '../DbGlfsc.api';
  import {defHttp} from "/@/utils/http/axios";
  import {apiCurrency} from "/@/views/assets/currency/Tblrate.api";
  import {api} from "/@/views/assets/leaseContract/DbHtb.api";
  import {columns as columns1} from "../DbGlfsc.data"
  import {apiGlfsc,batchAdd} from "../DbGlfsc.api";
  import CopyDbGlfscModal from "./CopyDbGlfscModal.vue"
 // import DbGlfscModal from "./DbGlfscModal.vue"

  import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import {useMessage} from "/@/hooks/web/useMessage";

  const CopyDbGlfscModalRef = ref();
  const columns: BasicColumn[] = columns1;
  const { createMessage, createErrorModal } = useMessage();
  //ajax请求api接口
  const demoListApi = (params) => {
    return defHttp.get({ url: apiGlfsc.copyList, params });
  };
  const [registerModal1, {openModal}] = useModal();

  const search: FormSchema[] = [
    {
      label: '复制月份',
      field: 'copyMonth',
      component: 'MonthPicker',
      componentProps:{
        showTime:false,
        valueFormat:"YYYY-MM",
        getPopupContainer: () => document.body,
      },
    },
    {
      label: '选择月份',
      field: 'selectMonth',
      component: 'MonthPicker',
      componentProps:{
        showTime:false,
        valueFormat:"YYYY-MM",
        getPopupContainer: () => document.body,
      },
    },
  ];
  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    designScope: 'basic-table-demo-ajax',
    tableProps: {
      title: '用户列表',
      api: demoListApi,
      columns: columns,
      formConfig: {
        labelWidth: 60,
        schemas: search,
        autoSubmitOnEnter:true,
        showAdvancedButton:true,
        fieldMapToNumber: [
        ],
        fieldMapToTime: [
        ],
      },
      actionColumn: {
        width: 120,
      },
    },
  });
  //BasicTable绑定注册
  const [registerTable,{getCacheColumns,getTableRef,getDataSource,reload},{ rowSelection, selectedRowKeys }] = tableContext;
  /**
   * 操作栏
   */


  // Emits声明
  const emit = defineEmits(['register','success']);
  const isUpdate = ref(true);
  const planModel = reactive({ });
  //表单配置
  const [registerForm, {setProps,resetFields, setFieldsValue, validate,updateSchema,getFieldsValue}] = useForm({
    labelWidth: 160,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: {span: 12}
  });
  //表单赋值
  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      //表单赋值
      await setFieldsValue({
        ...data.record,
      });
      let temp = {...data.record};
    }

    // 隐藏底部时禁用整个表单
    setProps({ disabled: !data?.showFooter })
  });

  //设置标题
  const title = "复制列表";//computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
  const { createConfirm } = useMessage();

  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  function allCopy(){
    createConfirm({
      iconType: 'warning',
      title: '确认生成',
      content: '确认全部生成所有当前收款计划',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        let param = tableContext[1].getForm().getFieldsValue();
        console.log(param)
        return defHttp.post({url: apiGlfsc.copyAll, data:param}).then(() => {
          handleSuccess();
        });
      }
    });
  }
  function handleEdit(record) {
   // console.log(record);
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: true,
    });
  }
  function setRecord(params){
    console.log(params)
    const ds =  getDataSource();
    console.log(ds)
    for(let i=0;i<ds.length;i++){
      if(ds[i].id==params.id){
        Object.assign(ds[i],params);
      }
    }
  }
  function tableSubmit(){
    console.log("table submit")
  }
  //表单提交事件
  async function handleSubmit(v) {

    if(rowSelection.selectedRows.length==0){
      createMessage.warn("请至少选择一条想要保存的数据");
      return;
    }
    console.log(rowSelection.selectedRows)
    batchAdd(rowSelection.selectedRows,false);
    (selectedRowKeys.value = []) && reload();

  }
  function handleSuccess(){

  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number){
    width: 100%
  }

  :deep(.ant-calendar-picker){
    width: 100%
  }
</style>
